<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
			  <el-breadcrumb-item>考试概览</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				 <router-link to="/examoverview" active-class="hover">考试概览</router-link>
				 <router-link to="/studentmanage" active-class="hover">考生管理</router-link>
				 <router-link to="/teachermanage" active-class="hover">评阅教师管理</router-link>
				 <router-link to="/scorerelease" active-class="hover">成绩管理</router-link>
			</div>
			<div class="overviewcontent">
				<div class="overvcontentTop">
					<div>
						<h3 style="font-weight:bold;">{{examlist.name}}</h3>
						<div class="examInfo">
							<b><i>时间：</i>{{examlist.startTime | formatDate}}</b>
							<b>
								<i>年级：</i>
								<em v-if="!examlist || !examlist.studentRange || examlist.studentRange.length === 0">--</em>
								  <em v-else v-for="item in examlist.studentRange" :key="item.id">
								    {{item.gradeName || '--'}}
								  </em>
							</b>
							<b><i>考试模式：</i>{{examlist.optionalName}}</b>
							<b><i>上传方式：</i>{{examlist.markHubType!=4?'本地识别后上传':'扫描仪扫描识别'}}</b>
							<b><i>评阅方式：</i>{{examlist.markHubType==1?'全校阅卷':examlist.markHubType==2?'分班阅卷':examlist.markHubType==3?'导入成绩':examlist.markHubType==4?'先批后扫':'线上考试'}}</b>
						</div>
					</div>
					<span @click="addExam(examlist)">编辑考试</span>
				</div>
				<div class="tableContent">
					<table cellspacing="0" cellpadding="0" style="width:100%">
						<tr>
							<th>科目ID</th>
							<th>考试科目</th>
							<th>试题管理</th>
							<th v-if="examlist.markHubType!=4">考试模板</th>
							<th>扫描进度</th>
							<th>上传异常</th>
							<th>客观题异常</th>
							<th v-if="examlist.markHubType!=4">任务分配</th>
							<th v-if="examlist.markHubType!=4">评阅进度</th>
							<th v-if="examlist.markHubType!=4">评阅异常处理</th>
							<!-- <th>仲裁处理</th> -->
							<th>成绩管理</th>
						</tr>
						<tr v-for="item in examlist.examCourses">
							<td>{{item.coursesId}}</td>
							<!-- <i>{{item.examStage==1?'信息设置':item.examStage==2?'扫描上传':item.examStage==3?'开始阅卷':'发布成绩'}}</i> -->
							<td>{{item.coursesName}}</td>
							<!-- {{item.questionStatus==1?'待添加':'已完成'}} -->
							<td>
								<span :class="item.questionStatus==1?'red':'blue'" @click="routerlinkmodel('/questionmanage',item)" v-if="item.objectives==0&&item.subjectives==0">待添加</span>
								<span style="font-size:12px;" :class="item.questionStatus==1?'blue':'green'" @click="routerlinkmodel('/questionmanage',item)" v-else-if="item.examCompleted"><i style="font-style:normal;display: block;">{{item.objectives+'-'+item.subjectives}}</i>已完成</span>
								<span :class="item.questionStatus==1?'blue':'green'" @click="routerlinkmodel('/questionmanage',item)" v-else>{{item.objectives+'-'+item.subjectives}}</span>
							</td>
							<td v-if="examlist.markHubType!=4">
								<span :class="item.templateStatus==1?'blue':'red'" @click="routerlinkmodel('/templateinformation',item)" v-if="item.templateObjectives==0&&item.templateSubjectives==0">待添加</span>
								<span style="font-size:12px;" :class="item.templateStatus==1?'blue':'green'" @click="routerlinkmodel('/templateinformation',item)" v-else-if="item.templateCompleted"><i style="font-style:normal;display: block;">{{item.templateObjectives+'-'+item.templateSubjectives}}</i>已完成</span>
								<span :class="item.templateStatus==1?'blue':'green'" @click="routerlinkmodel('/templateinformation',item)" v-else>{{item.templateObjectives+'-'+item.templateSubjectives}}</span>
							</td>
							<td>
								<span v-if="item.scanUploadStatus==1||item.scanUploadStatus==3" :class="item.scanUploadStatus==1||item.scanUploadStatus==3?'green':'red'" @click="routerlinkmodel('/identificationrecord',item)"><i style="font-style:normal;display: block;">{{item.uploadCount}}/{{item.studentTotal}}</i><em>{{item.scanUploadStatus==0?'未开启扫描':item.scanUploadStatus==1?'允许扫描':item.scanUploadStatus==2?'停止扫描':'完成扫描'}}</em></span>
								<span v-else :class="item.scanUploadStatus==0||item.scanUploadStatus==2?'red':'green'" @click="routerlinkmodel('/identificationrecord',item)">{{item.uploadCount}}/{{item.studentTotal}}<em>{{item.scanUploadStatus==0?'未开启扫描':item.scanUploadStatus==1?'允许扫描':item.scanUploadStatus==2?'停止扫描':'完成扫描'}}</em></span>
							</td>
							<td><span>{{item.uploadEx}}</span></td>
							<td><span>{{item.objectiveEx}}</span></td>
							<td v-if="examlist.markHubType!=4">
								<span :class="item.taskAssignmentStatus==1?'red':''" @click="routerlinkmodel('/taskallocation',item)" v-if="item.assignedCount==0&&item.allocation==0">待分配</span>
								<span :class="item.taskAssignmentStatus==1?'green':''" @click="routerlinkmodel('/taskallocation',item)" v-else-if="item.taskAssignmentStatus==2"><i style="font-style:normal;display: block;">{{item.assignedCount+'-'+item.allocation}}</i>待分配</span>
								<span :class="item.taskAssignmentStatus==1?'green':''" @click="routerlinkmodel('/taskallocation',item)" v-else>{{item.assignedCount+'-'+item.allocation}}</span>
							</td>
							<td v-if="examlist.markHubType!=4">
								<span :class="item.markHubStatus==1?'red':'green'"  @click="routerlinkmodel('/reviewprogress',item)" v-if="item.markHubStatus==1">未开始</span>
								<span  :class="item.markHubStatus==2||item.markHubStatus==3?'green':'green'"  @click="routerlinkmodel('/reviewprogress',item)" v-else><i style="font-style:normal;display: block;">{{item.viewCount}}/{{item.sumViewCount}}</i><em>{{item.markHubStatus==1?'未开始':item.markHubStatus==2?'进行中':item.markHubStatus==3?'暂停':'已完成'}}</em></span>
							</td>
							<td v-if="examlist.markHubType!=4"><span @click="routerlinkmodel('/exceptionhandling',item)">{{item.markHubEx}}</span></td>
							<!-- <td><span @click="routerlinkmodel('/arbitrationprocessing',item)">{{item.arbitrationCount}}</span></td> -->
							<td><span :class="item.scorePublishStatus==1?'red':item.scorePublishStatus==2?'blue':'green'" @click="routerlinkmodel('/scorerelease',item)">{{item.scorePublishStatus==1?'未完成':item.scorePublishStatus==2?'未发布':'已发布'}}</span></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<examEdite v-if="addExamIshow" @addexamclick="addexamclick" :examobj="examobj" :addexamtype="addexamtype"></examEdite>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import examEdite from '../../components/school/exditexam.vue'
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			return{
				addExamIshow:false,	
				examlist:{},
				examobj:{},
				addexamtype:1,
				examobjcontent:{}
			}
		},
		mounted() {
			    this.examobjcontent = JSON.parse(sessionStorage.getItem('examContent'))
				this.examoverive(this.examobjcontent.id)
		},
		methods:{
			routerlinkmodel(url,con){
				sessionStorage.setItem('examInfo',JSON.stringify(con))
				sessionStorage.setItem('examName',this.examlist.name)
				this.$router.push(url)
			},
			examoverive(id){
				get('/exam/details', { examId: id })
				.then(res => {
					//console.info(res)
					if(res.code==200){
						this.examlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					  // 处理错误
					  this.$message.error(error.message);
				});
			},
			// 新建考试
			addExam(obj){
				this.examobj=obj
				this.addExamIshow = true
			},
			addexamclick(data){
				if(data=='返回'){
					this.addExamIshow=false
				}else{
					this.examoverive(this.examobjcontent.id)
					this.addExamIshow=data
				}
			},
			// 跳转不同页面
			routerlink(link){
				this.$router.push(link)
			}
		},
		components:{navTop,examEdite}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.overviewcontent{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		width:auto;padding:0 40px;
		margin:20px auto;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#333;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.overvcontentTop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px;
	}
	.overvcontentTop h3{
		font-size:18px;
		font-weight:500;
		padding-bottom:15px;
	}
	.overvcontentTop span{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.tableContent{
		padding:0 24px 30px;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr{
		background:#FAFAFB
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-2px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-2px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-2px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-2px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-2px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(2n){
		background:#fff
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>